<template>
  <div
    class="all"
    :style="{ height: screenHeight + 'px', width: screenWidth + 'px' }"
  >
    <div class="top">
      <div style="width: 60px" @click="returnTap">取消</div>
      <span>设置备注和描述</span>
      <van-button type="info" style="height: 30px">完成</van-button>
    </div>

    <div class="title">备注名</div>
       <div class="input">
      <input type="text" placeholder="最熟悉的陌生人" />
    </div>
        <div class="title">描述</div>
       <div class="input">
      <input type="text" placeholder="添加更多备注信息" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      screenWidth:
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth,
      screenHeight:
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight,
    };
  },
  methods: {
  returnTap() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped>
.all {
  background: #eeeeee;
}
.top {
  height: 60px;
  width: 90%;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 60px;
  position: relative;
  background: #eeeeee;
}
.title {
  padding: 0 0 0 3%;
  width: 97%;
  height: 40px;
  line-height: 40px;
  color: #8b8b8b;
}
.input {
  height: 50px;
  width: 90%;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  background: #fff;
}
.input input {
  width: 100%;
  background: #fff;
  height: 50px;
  border: none;
  font-size: 18px;
}
</style>